<template>
    <div class="contact-page">
        <div class="content">
            <p v-if="loading">加载中...</p>
            <table v-else>
                <thead>
                    <th>机构</th>
                    <th>联系类型</th>
                    <th>联系方式</th>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in tableCustormer" v-bind:key="index">
                        <td>{{item.organization}}</td>
                        <td>{{item.contactType}}</td>
                        <td>{{item.contact}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    name: 'CustomerList',
    data() {
        return {
            activeClass: "",
            custormerList: [],
            tableCustormer: [],
            loading:false
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        addAnimate() {
            this.activeClass = "display animate__animated animate__fadeInUp animate__slow";
        },
        removeAnimate() {
            this.activeClass = "";
        },
        init() {
            this.loading = true;
            var url = 'https://qcloud.resource.dev.hygeian.com.cn/weibo/custormerlist.json?d=' + new Date().getTime();
            var _this = this;
            axios.get(url).then(function (response) {

                if (response.data != "") {

                    _this.custormerList = response.data.items;

                    _this.custormerList.forEach(element => {
                        var o = JSON.parse(element)
                        _this.tableCustormer.push(o);
                    });

                    console.log(_this.tableCustormer);

                }
                _this.loading = false;
            });

        }
    }
}
</script>

<style lang="scss" scoped>
.contact-page {
    height: 100vh;
    background-color: #fff;

    .display {
        display: block !important;
    }

    .content {
        // display: none;
        padding: 20px;
    }


    table {
        border-collapse: collapse;
        width: 100%;
    }

    table,
    th,
    td {
        border: 1px solid #ccc;
    }

    th,
    td {
        height: 50px;
        text-align: center;
    }

}
</style>
